import * as React from 'react';
import Box from '@mui/material/Box';
import { DataGrid } from '@mui/x-data-grid';
// import { useSelector, useDispatch } from 'react-redux';
// import * as store from './reducers/partsSlice';
//   // {
  //   field: 'fullName',
  //   headerName: 'Full name',
  //   description: 'This column has a value getter and is not sortable.',
  //   sortable: false,
  //   width: 160,
  //   valueGetter: (value, row) => `${row.firstName || ''} ${row.lastName || ''}`,
  // },
export default function DataGridDemo(props) {
  var cols = useSelector((state) => state.parts.cols);
  var data = useSelector((state) => state.parts.data);
  let columns=cols.map((item,index)=>{//name: 'A', key: 0
    // return {field:item.key,lastName:item.name,firstName:item.name,age:item.key}
    return({
      field: ""+item.name,
      headerName: item.name,
      description: 'This column has a value getter and is not sortable.',
      sortable: false,
      width: 160,
      // valueGetter: (value, row) => `${row.firstName || ''} ${row.lastName || ''}`,
    })
  })
  let rows=data.map((item,index)=>{//name: 'A', key: 0
    console.log(index,item);
    // return {id:index,lastName:item[0],firstName:item[1],age:item[2]}
    // return {}
    let o={}
    o.id=index
    let i=0
    while(i<cols.length){
      o[cols[i].name]=item[i]
      i+=1
    }
    return o
  })
  console.log("DataGridDemo==========")
  // console.log(cols)
  return (
    <Box sx={{ height: 600, width: '100%' }}>
      <DataGrid
        rows={rows}
        columns={columns}
        checkboxSelection
        disableRowSelectionOnClick
      />
    </Box>
  );
}